<!DOCTYPE HTML>
<html ng-app="reres">
<head>
    <meta charset="UTF-8">
    <title>ResRes Options</title>
    <link rel="icon" href="icon.png" mce_href="icon.png" type=”image/x-icon”>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/options.css"/>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/options.js"></script>
</head>
<body ng-controller="mapListCtrl">
<div class="navbar navbar-inverse navbar-fixed-top top">
    <div class="container">
        <div class="btnBox">
            <span class="h2"><a title="view in the github" href="https://github.com/hanan198501/ReRes" target="_blank">ReRes</a></span>
            <small> &nbsp;&nbsp;&nbsp;&nbsp;Change the response of the request.</small>
            <button class="btn btn-primary fr" ng-click="export()">导出</button>
            <div class="file fr"><button class="btn btn-primary">导入</button><input type="file" id="jsonFile"/></div>
            <button class="btn btn-primary fr" ng-click="addRule()"> + </button>
        </div>
    </div>
</div>
<div class="container">
    <div style="display:{{editDisplay}};" class="editBox">
        <button type="button" class="close" aria-hidden="true" ng-click="hideEditBox()">&times;</button>
        <div class="errorMsg">{{inputError}}</div>
        <div class="form-group">
            <label for="req">If URL match:</label>
            <input type="text" class="form-control" id="req" ng-model="curRule.req"/>
        </div>
        <div class="form-group">
            <label for="res">Response:</label>
            <input type="text" class="form-control" id="res" ng-model="curRule.res"/>
        </div>
        <div class="form-group">
            <label for="res">Group:</label>
            <input type="text" class="form-control" id="res" ng-model="curRule.group"/>
        </div>
<!--        <div class="form-group">
            <label for="type">Type:</label>
            <select ng-model="curRule.type" class="form-control" id="type">
                <option value="file">URL映射</option>
                <option value="dir">目录映射</option>
            </select>
        </div>-->
        <button class="btn-block btn btn-primary" ng-click="saveRule()">保存</button>
    </div>
    <table>
        <tboby>
            <tr ng-repeat="(group, rulesMap) in rules track by $index">
                <td>
                    <table class="table table-hover table-bordered">
                        <thead>
                            <td>Group</td>
                            <td>Enable</td>
                            <td>If URL match</td>
                            <td>Response</td>
                            <!--<td>Type</td>-->
                            <td>Operating</td>
                        </thead>
                        <tbody>
                            <tr ng-repeat="rule in rulesMap track by $index">
                                <td ng-if="$index === 0" rowspan="{{rulesMap.length}}" style="width: 140px;vertical-align: middle;border-right: 1px solid #ddd;background: #fff;">{{group || group === unidefined || '未命名'}}</td>
                                <td><input type="checkbox" ng-model="rule.checked"/></td>
                                <td><div title="{{rule.req}}">{{rule.req}}</div></td>
                                <td><div title="{{rule.res}}">{{rule.res}}</div></td>
                                <!--<td>{{rule.type == "file" ? "URL映射" : "目录映射"}}</td>-->
                                <td>
                                    <button ng-click="edit(rule)" type="button" class="btn btn-primary btn-xs edit">编辑</button>
                                    <button ng-click="removeUrl(rule)" type="button" class="btn btn-default btn-xs remove">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tboby>
    </table>

</div>
</body>
</html>